<template>
    <!-- 搜索 -->
    <z-paging :empty-view-error-text="`对不起,页面走丢了\n请刷新试试`" :empty-view-text="`暂无订单`"
        :show-empty-view-reload-when-error="false" ref="paging" v-model="list" @query="queryList" :fixed="true"
        width="100%" height="100%">

        <template #top>
            <view class="px-[32rpx]">
                <view class=" pt-[20rpx]  flex align-center justify-between">
                    <view style="border: #000000 solid 2rpx;"
                        class="w-[686rpx] h-[76rpx] bg-[#FFFFFF] flex justify-between rounded-[8rpx]">
                        <view class="flex items-center  pl-[24rpx] ">
                            <view class="font-[500] text-[28rpx] font-[#000000] leading-[40rpx] text-left ">全国
                            </view>
                            <image src="@/static/images/img/xb_1.png" class="w-[40rpx] h-[40rpx] mr-[8rpx] "></image>
                            <view class="">
                                <input class="w-[400rpx] h-[40rpx] " v-model="keyWord" type="text" placeholder="请输入"
                                    placeholder-style="color:#999999;font-size:24rpx;font-weight:400;font-family:PingFangSC;" />
                            </view>
                        </view>

                        <view class="w-[132rpx] h-[60rpx] pt-[6rpx] mr-[8rpx] rounded-[4rpx]">
                            <up-button text="搜索" @click="search" :customStyle="{
                                width: '132rpx',
                                height: '60rpx',
                                color: '#000000',
                                borderRadius: '10rpx',
                                fontSize: '28rpx',
                                fontWeight: '500',
                                fontFamily: 'PingFangSC',
                                background: 'linear-gradient( 98deg, #FFF8DD 0%, #FFD856 100%)',
                                  border: '0'
                            }"></up-button>
                        </view>
                    </view>
                </view>
                <up-tabs :list="tabs" @change="handleTabsChange" :scrollable="false" :activeStyle="{
                    color: '#000',
                    fontWeight: '600',
                    fontSize: '28rpx',
                }" :inactiveStyle="{
                    color: '#000000',
                    fontSize: '28rpx'
                }" lineWidth="36rpx" lineHeight="8rpx"
                    lineColor="linear-gradient( 98deg, #FFF1B8 0%, #FFD856 100%)"></up-tabs>
            </view>
        </template>
        <view class="p-[32rpx]">
            <!-- </up-sticky> -->
            <view v-for="item in list" class="mb-[24rpx]" :key="item + 'pf-card'"
                @click.stop="push(item?.informationType == 2 ? `/pages_qc/wholesale_details/index?id=${item?.id}` : `/pages_qc/particularscar/particularscar?id=${item?.id}`)">
                <pf-card :item="item" />
            </view>
        </view>
    </z-paging>
</template>
<script setup>
import {
    onLoad
} from '@dcloudio/uni-app'
import {
    ref
} from 'vue'
import { whoableList } from '@/api/whoable'
const menuButtonInfoBottom = ref(90) // 胶囊按钮信息
const keyWord = ref('');
const search = () => {
    paging.value.reload();
}
onLoad(() => {
    menuButtonInfoBottom.value = uni.getMenuButtonBoundingClientRect().bottom || 90;
    console.log('结果是', uni.getMenuButtonBoundingClientRect())
    console.log('结果qqqqqqq是', menuButtonInfoBottom.value)
})
// 筛选
const tabs = ref([{ name: '全部', value: null }, { name: '求购', value: 0 }, { name: '收购', value: 1 }, { name: '批发', value: 2 }, { name: '询价', value: 3 }])
const tabsIndex = ref(null);
const handleTabsChange = (e) => {
    tabsIndex.value = e.value;
    paging.value.reload();
    console.log('tabsIndex.value', e.index)
}
// 分页数据
const list = ref([]);
const paging = ref(null);
const queryList = async (pageNum, pageSize) => {
    try {
        const from = {
            pageNum: pageNum,
            pageSize: pageSize,
            informationType: tabsIndex.value,
            brandModel: keyWord.value
        };
        const { rows } = await whoableList(from);
        paging.value.complete(rows);
    } catch (e) {
        console.log('报错=>', e);
        //TODO handle the exception
        paging.value.complete(false);
    }
};
</script>
<style scoped lang="scss"></style>